<template>
    <div id="content">
     <!-- 查询 -->
    <el-popover placement="bottom-start"  trigger="click">
      <el-form :inline="true" :model="search" label-width="75px" class="search-panle">
        <el-form-item label="样品编号" ><el-input v-model="search.sampleid"></el-input></el-form-item>
        <el-form-item label="所属客户"><el-input v-model="search.customerid"></el-input></el-form-item>
        <el-form-item label="入库时间" ><el-date-picker v-model="search.time" type="daterange"  range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" align="right"></el-date-picker></el-form-item>
        <el-button type="primary" @click="searchData">提交</el-button>
      </el-form>
      <el-button slot="reference" type="primary">查询</el-button>
    </el-popover>
    <el-button  type="primary"  @click="detailDialogHander()" style="margin-left:5px">新增</el-button>

    <!-- 表格 -->
    <!-- <el-table :data="tableData" stripe border class="company-table" :height="tableHeight" style="width: 100%;">
        <el-table-column label="样品编号:" prop="sampleid"></el-table-column>
        <el-table-column label="样品名称:" prop="sampleName"></el-table-column>
        <el-table-column label="所属客户:" prop="customerName"></el-table-column>
        <el-table-column label="入库时间:" prop="time"></el-table-column>
        <el-table-column label="状态:" prop="status"></el-table-column>
        <el-table-column fixed="right" label="操作"  align="center" min-width="75">
          <template slot-scope="scope">
            <el-button  @click="detailDialogHander(scope.row)" type="text" size="small">详情</el-button>
          </template>
        </el-table-column>
    </el-table> -->
    <el-tabs v-model="mainActiveName" @tab-click="syschRecodeStatus">
      <el-tab-pane label="未入库" name="0">
        <div class="divTop" :style="{'height':(divAutoHeight-120)+'px','overflow-y':'auto'}">
          <ul>
             <li v-for="item in tableData" class="showDataLi">
                <div class="showDataTop">
                  <div class="showDataTopLeft">
                    <img v-if="item.sampleid" :src="'data:image/png;base64,'+ item.sampleid" class="showDataImg" />
                  </div>
                  <div class="showDataTopCenter">
                    <div style="width:99%;height:30px;">
                        <div style="font-size:16px;font-weight:bolder;float:left;">
                            {{item.providerNoName}}
                        </div>
                        <div  style="font-size:13px;color:gray;float:left;margin-left:5px;margin-top:3px;">
                            {{item.sampleName=== '1'? '男':'女'}}&nbsp;{{item.sampleName!=null?35:20}}岁
                        </div>
                    </div>
                    <div style="width:99%;height:70px;font-size:13px;color:gray;">
                      <div>登记号：{{item.registerNo}}</div>
                      <div style="margin-top:3px;">样品名称：{{item.sampleName}}</div>
                      <div style="margin-top:3px;">样品号：{{item.sampleid}}</div>
                      <div style="margin-top:3px;">入库时间:{{item.time}}</div>
                    </div>
                  </div>
                  <div class="showDataTopRight">
                    <div   v-if="item.sampleid == 1"  style="width:50px;height:18px;font-size:10px;color:white;background:#B7B7B7;margin:0px auto;margin-top:20px;border-radius: 10px;">
                      已入库
                    </div>
                    <div   v-if="item.sampleid != 1 "  style="width:50px;height:18px;font-size:10px;color:white;background:#03BC89;margin:0px auto;margin-top:20px;border-radius: 10px;">
                      未入库
                    </div>
                  </div>

                </div>
                <div class="showDataFoot" >
                  <div class="showDataFootLeft" @click="detailDialogHander(item)">
                    详情
                  </div>
                  <div class="showDataFootRight" @click="detailDialogHander(item)">
                    编辑
                  </div>
                </div>
              </li>              
          </ul>
        </div>
        <div class="divfooter">
           <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="已入库" name="1">
        <div class="divTop" :style="{'height':(divAutoHeight-120)+'px','overflow-y':'auto'}">
          <ul>
             <li v-for="item in tableData" class="showDataLi">
                <div class="showDataTop">
                  <div class="showDataTopLeft">
                    <img v-if="item.sampleid" :src="'data:image/png;base64,'+ item.sampleid" class="showDataImg" />
                  </div>
                  <div class="showDataTopCenter">
                    <div style="width:99%;height:30px;">
                        <div style="font-size:16px;font-weight:bolder;float:left;">
                            {{item.providerNoName}}
                        </div>
                        <div  style="font-size:13px;color:gray;float:left;margin-left:5px;margin-top:3px;">
                            {{item.sampleName=== '1'? '男':'女'}}&nbsp;{{item.sampleName!=null?35:20}}岁
                        </div>
                    </div>
                    <div style="width:99%;height:70px;font-size:13px;color:gray;">
                      <div>登记号：{{item.registerNo}}</div>
                      <div style="margin-top:3px;">样品名称：{{item.sampleName}}</div>
                      <div style="margin-top:3px;">样品号：{{item.sampleid}}</div>
                      <div style="margin-top:3px;">入库时间:{{item.time}}</div>
                    </div>
                  </div>
                  <div class="showDataTopRight">
                    <div   v-if="item.sampleid == 1"  style="width:50px;height:18px;font-size:10px;color:white;background:#B7B7B7;margin:0px auto;margin-top:20px;border-radius: 10px;">
                      已入库
                    </div>
                    <div   v-if="item.sampleid != 1 "  style="width:50px;height:18px;font-size:10px;color:white;background:#03BC89;margin:0px auto;margin-top:20px;border-radius: 10px;">
                      未入库
                    </div>
                  </div>

                </div>
                <div class="showDataFoot" >
                  <div class="showDataFootLeft" @click="detailDialogHander(item)">
                    详情
                  </div>
                  <div class="showDataFootRight" @click="detailDialogHander(item)">
                    编辑
                  </div>
                </div>
              </li>              
          </ul>
       </div> 
       <div class="divfooter">
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>       
       </div>       
      </el-tab-pane>    
    </el-tabs>
    <!--  -->
    <el-dialog :title="detailDialog.title" :visible.sync="detailDialog.isShow" width="99%" top="10px" :close-on-click-modal="false" class="dialog-form" v-dialogDrag>
      <div :style="{'height':(tableHeight-20)+'px','overflow-y':'auto'}">
          <h1>样品编号:</h1>
          <h1>样品名称:</h1>
          <h1>所属客户:</h1>
          <h1>入库时间:</h1>
      </div>
    </el-dialog>
    </div>
</template>
<script>
export default {
    data(){
        return{
          mainActiveName:'0',
          search:{
              sampleid:'',
              customerid:'',
              time:new Date(),
          },
          detailDialog:{
              title:'操作',
              isShow:false
          },
          tableData:[
              {
                  sampleid:1,
                  sampleName:"血浆",
                  customerName:localStorage.getItem('ms_username'),
                  time:this.timestampToTime(new Date(),'yyyy-mm-dd hh:mm:ss'),
                  status:'未入库',
              }
          ],
          pagination:{
            currentPage:1,
            pageSize:10,
            total:0
          },  
        }
    },
    mounted(){

    },
    created(){
        
    },
    computed:{
        tableHeight(){
            return this.$store.state.clientHeight-184;
        },
        divAutoHeight(){
            return this.$store.state.clientHeight-100;
        },
    },
    watch:{

    },
    methods:{
        //详情弹窗
        detailDialogHander(row){
            let self = this;
            self.detailDialog.isShow = true;

        },
        searchData(){
            let self = this;

        },
        syschRecodeStatus(ins){
            let self = this;
            switch (ins.name) {
            case '1':
                // self.search.recodeStatus=1;
                // self.getData();
                break;
            case '0':
                // self.search.recodeStatus=0;
                // self.getData();
                break;   
            default:
                break;
            }
        },

    }

}
</script>
<style scoped>
 .showDataLi{
    width:400px;
    height:200px;
    border:1px solid rgba(0,0,0,0.1);
    background: white;
    box-shadow : 0px 0px 8px rgba(216,216,216,0.9);
    float:left;
    margin-left: 10px;
    margin-top:10px;
    border-radius: 10px;
    overflow-y:hidden;
    cursor:pointer;
  }
  .showDataLi:hover{
    border:1px solid rgba(0,0,0,0.2);
    box-shadow : 0px 0px 13px rgba(0,0,0,0.3);
  }
  
  .showDataTop{
    width:398px;
    height:148px;
  }
  .showDataFoot{
    border-top:1px solid rgba(216,216,216,0.5);
    width:100%;
    height:51px;
    text-align:center;
    line-height:50px;
    background:#F9FAFC;
    font-size:14px;
    color:rgba(0,0,0,0.5);
  }
  .showDataFootLeft,.showDataFootRight{
    width:50%;
    height:51px;
    color:black;
    float:left;
    margin-left:0px;
  }
  .showDataFootLeft:hover,.showDataFootRight:hover{
      color:#03BC89;
      background:rgba(216,216,216,0.4);
      font-weight:bolder;
  }
  .showDataFoot:hover{
  }

.showDataTopLeft{
    border:0px solid blue;
    width:80px;
    height:82px;
    float:left;
    margin-left:10px;
    margin-top:20px;
    border-radius: 42px;
    overflow-y:hidden;
  }
  .showDataImg{
    width:100%;
    margin-top:-2px;
  }
  .showDataTopCenter{
    width:210px;
    height:100px;
    float:left;
    margin-left:10px;
    margin-top:20px;
  }
  .showDataTopRight{
    width:80px;
    height:148px;
    float:left;
    text-align:center;
  }
  .divTop{
    width:100%;
  }
  .divfooter{
    width:60%;
    height:50px;

  }
</style>